<template>
  <div class="user-container app-container">
    <div class="filter-container">
      <div>
        <el-button v-waves class="filter-item" type="primary" icon="el-icon-circle-plus" @click="onEditOrAdd()">
          新增
        </el-button>
      </div>
      <div>

        <el-input v-model="listQuery.id_public_middle_table" placeholder="请输入新闻id" clearable
          class="filter-item input-item" style="width: 200px" @clear="handleFilter" @keyup.enter.native="handleFilter" />
        <el-input v-model="listQuery.mid_table_remark_001_like" placeholder="请输入新闻标题" clearable
          class="filter-item input-item" style="width: 200px" @clear="handleFilter" @keyup.enter.native="handleFilter" />
        <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
          搜索
        </el-button>
      </div>
    </div>

    <div class="page-content">
      <el-table :key="0" v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
        <el-table-column label="ID" align="center" width="80">
          <template slot-scope="{ row }">
            <span>{{ row.id_public_middle_table }}</span>
          </template>
        </el-table-column>
        <el-table-column label="预览图" align="center">
          <template slot-scope="{row}">
            <el-image style="width: 100px; height: 100px" :src="row.mid_table_remark_002" fit="fill"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="新闻标题" align="center">
          <template slot-scope="{row}">
            <span>{{ row.mid_table_remark_001 || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否发布" align="center">
          <template slot-scope="{row}">
            <el-switch :value="row.mid_table_remark_003 === publishStatus.ON"
              @change="onPublishStatusChange(row)"></el-switch>
          </template>
        </el-table-column>

        <el-table-column label="发布时间" align="center">
          <template slot-scope="{row}">
            <span>{{ row.time_update || '-' }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="{row}">
            <el-button type="text" size="mini" @click="onDetails(row)">
              详情
            </el-button>
            <el-button class="col-coach-202" type="text" size="mini" @click="onDelete(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <pagination v-show="total > 0" :total="total" :page.sync="currentPage" :limit.sync="listQuery.limit"
      @pagination="getList" />
  </div>
</template>

<script>

import Pagination from "@/components/Pagination";
import { newsList, newsEdit } from "@/api/news";
import waves from "@/directive/waves"; // waves directive
import { publishStatus } from './utils';

export default {
  name: "News",
  directives: { waves },
  components: {
    Pagination,
  },
  data() {
    return {
      publishStatus,
      list: [],
      listLoading: false,
      listQuery: {
        invoke_method: "public_load_middle_table_list",
        pre_db_para_middle_table_name: "public_middle_table_lite_mod_news_msg",
        type_middle_app: "10001",
        type_inner_app: "1001",
        is_online: "0",
        pre_db_para_begin_idx: 0,
        pre_db_para_length_4_list: 10,
        mid_table_remark_001_like: null, // 新闻标题
        mid_table_remark_003: null, // 新闻状态
      },
      total: 0,
      total: 1,
      currentPage: 1,
    };
  },

  mounted() {
    this.getList();
  },

  methods: {
    /*
     * 获取页面数据
     * */
    getList() {
      this.listLoading = true;
      const tmpListQuery = Object.assign({}, this.listQuery);
      newsList(this.Qs.stringify(tmpListQuery)).then((response) => {
        this.list = response.page_content;
        this.total = response.result_num;
        setTimeout(() => {
          this.listLoading = false;
        }, 0.5 * 1000);
      });
    },
    /*
     * 查询新闻列表
     * */
    handleFilter() {
      this.listQuery.pre_db_para_begin_idx = 0;
      this.getList();
    },
    /*
     * 新增/编辑新闻
     * */
    onEditOrAdd(row) {
      this.$router.push({
        path: "/newsEdit",
        query: { id: row?.id_public_middle_table },
      });
    },
    /*
     * 新闻详情
     * */
    onDetails(row) {
      this.$router.push({
        path: "/newsDetails",
        query: { id: row?.id_public_middle_table },
      });
    },
    /*
    * 删除新闻
    * */
    onDelete(row) {
      this.$confirm("此操作将永久删除该新闻, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          if (await this.handleEdit(row, { is_online: '1' })) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    /**
     * 发布状态改变
     * */
    onPublishStatusChange(row) {
      const status = row.mid_table_remark_003 === publishStatus.ON ? publishStatus.OFF : publishStatus.ON;
      this.handleEdit(row, { mid_table_remark_003: status });
    },
    handleEdit(row = {}, data = {}) {
      return newsEdit(
        this.Qs.stringify(Object.assign({
          invoke_method: "public_insert_or_update_middle_table",
          pre_db_para_middle_table_name: "public_middle_table_lite_mod_news_msg",
          type_middle_app: '10001',
          type_inner_app: '1001',
          is_online: row.is_online,
          mid_table_remark_001: row.mid_table_remark_001,
          mid_table_remark_002: row.mid_table_remark_002,
          mid_table_remark_003: row.mid_table_remark_003,
          mid_table_remark_004: row.mid_table_remark_004,
          mid_table_remark_005: row.mid_table_remark_005,
          mid_table_remark_008: row.mid_table_remark_008,
          pre_db_para_id_public_middle_table: row.id_public_middle_table,
        }, data))
      ).then((response) => {
        if (response.page_content.length > 0) {
          this.getList();
        }
        return response.page_content.length > 0;
      }).catch(() => false);
    }
  }
}
</script>




<style lang="scss" scoped>
@import "../../styles/common.scss";

.col-coach-102 {
  color: #29ae6d;
}

.col-coach-202 {
  color: #db1010;
}

.col-coach-302 {
  color: #db1010;
}

.filter-container {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.page-img {
  width: 100px;
  height: 100px;
  overflow: hidden;
  text-align: center;
  margin: 0 auto;
}
</style>